<template>
  <div style="width:100%">
    <el-form :inline="true">
      <div>
        <el-form-item label="所属类目：">
          <el-radio-group v-model="radio1">
            <el-radio-button label="闸机"></el-radio-button>
            <el-radio-button label="人脸识别立柱"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <br />
        <el-form-item label="设备状态：">
          <el-radio-group v-model="radio2">
            <el-radio-button label="已连接"></el-radio-button>
            <el-radio-button label="已断开"></el-radio-button>
            <el-radio-button label="全部"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称">
          <el-input placeholder="用户名／用户操作" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
        <br />
        <el-form-item>
          <el-button type="primary" @click="getDataList()">新增</el-button>
        </el-form-item>
      </div>
    </el-form>
    <div>
      <el-row :gutter="12">
        <el-col :span="8" v-for="i in 5" :key="i" style="margin-bottom:20px">
          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <el-row :gutter="20">
              <el-col :span="6">
                <img
                  style="width:80% ;margin:40% auto 0;    display: block;"
                  src="@/assets/img/zhaji.png"
                />
              </el-col>
              <el-col :span="18">
                <el-form :inline="true" style="padding:10px">
                  <el-form-item label="名称" style="margin-bottom:5px">
                    <el-input placeholder="名称" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="编号" style="margin-bottom:5px">
                    <el-input placeholder="编号" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="状态" style="margin-bottom:0">
                    <el-input placeholder="已连接" clearable></el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <div
              class="bottom clearfix"
              style="display:flex;background:rgba(247,249,250,1);height:45px"
            >
              <el-button type="text" class="button" style="flex:1">设置</el-button>
              <el-button type="text" class="button" style="flex:1">删除</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio1: "闸机",
      radio2: "已连接"
    };
  },
  methods: {
    getDataList() {
      this.$message({
        message: "操作成功",
        type: "success",
        duration: 1500,
        onClose: () => {}
      });
    }
  }
};
</script>

<style>
.bottom button.button {
  text-align: center;
  margin-left: 0;
}
.button {
  border-right: 1px solid #e6e6e6;
  color: #666666;
  font-size: 13px;
}
.bottom button.button:last-child {
  border-right: none;
}
</style>